<?php $head_extension = '
    <link rel="stylesheet" type="text/css" media="screen" href="css/flexslider.css">        
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>      
    <script type="text/javascript" src="js/jquery.flexslider.js"></script>
';
?>

        <?php include 'includes/header.html.php'; ?>

        <div class="nav">

        <?php include 'includes/menu.html.php'; ?>

            <div class="nav-secondaire">
                <div class="ariane">
                    Accueil
                </div>

            </div>

            
        <?php include 'includes/recherche.html.php'; ?>
        </div> <!-- .nav -->

        <div class="content">
			
			<div class="slider">
				<div class="flexslider">
					<ul class="slides">
						<li>
                            <div class="slider-texte">
                                <h2>Hummm c'est bon&nbsp;!</h2>
                                <p>Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus
                                </p>
                            </div>
							<a href="#"><img  alt="humm c'est bon" src="img/slider-image1.png"></a>
						</li>
						<li>
                            <div class="slider-texte">
                                <h2>Ça aussi&nbsp;!</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit dolor eligendi totam doloribus non dolorem error exercitationem, saepe aliquam impedit quia illo praesentium sapiente nam ducimus debitis, quidem, sequi rem.
                                </p>
                            </div>
							<a href="#"><img  alt="humm c'est bon" src="img/slider-image1.png"></a>
						</li>	

						<li>
                            <div class="slider-texte">
                                <h2>J'ai déjà vu ça&nbsp;!</h2>
                                <p>Ullam laboriosam nihil at ea quia beatae eligendi dolores minus modi sequi consequuntur, quas veritatis fugit vero hic necessitatibus quibusdam quidem soluta facilis maiores, placeat temporibus magni expedita repudiandae odit.
                                </p>
                            </div>
							<a href="#"><img  alt="humm c'est bon" src="img/slider-image1.png"></a>
						</li>						
						
					</ul>
				</div>			
			</div>
            <div class="panneau-bas">
                <div class="panneau-bas-engagements">
                    <a href="#" class="bleu"><span class='icone-texte'>E</span>Paiement sécurisés
                        <div class="popup">
                            <div class="popup-top">
                                <h3>Paiement sécurisés</h3>
                                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, ex, vero, illo dicta commodi aut inventore nihil fugiat a molestias perspiciatis maxime odio recusandae voluptate sunt! Facilis iste neque et.</span>
                            </div>
                            <div class="popup-bottom"></div>
                        </div>
                    </a>
                    <a href="#" class="orange"><span class='icone-texte'>H</span>Un service de qualité
                        <div class="popup">
                            <div class="popup-top">
                                <h3>Un service de qualité</h3>
                                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, qui, iusto at obcaecati similique maxime sit maiores aliquam fuga dolorum quasi dolores rerum iste voluptates quidem explicabo architecto! Eum, laudantium!</span>
                            </div>
                            <div class="popup-bottom"></div>
                        </div>
                    </a>
                    <a href="#" class="vert"><span class='icone-texte'>G</span>Satisfait ou remboursé
                        <div class="popup">
                            <div class="popup-top">
                                <h3>Satisfait ou remboursé</h3>
                                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, modi qui soluta ipsa commodi neque est dicta reprehenderit recusandae repudiandae nesciunt rem veritatis mollitia perferendis voluptatum omnis fugiat saepe praesentium!</span>
                            </div>
                            <div class="popup-bottom"></div>
                        </div>
                    </a>
                    <a href="#" class="rose"><span class='icone-texte'>D</span>Les prix les plux bas
                        <div class="popup">
                            <div class="popup-top">
                                <h3>Les prix les plux bas</h3>
                                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet rerum dicta illo doloremque incidunt dignissimos possimus architecto doloribus. Veritatis, repellendus quos atque facilis tenetur deleniti consequuntur magnam voluptates perspiciatis beatae.</span>
                            </div>
                            <div class="popup-bottom"></div>
                        </div>
                    </a>
                </div>
                <div class="panneau-bas-newsletter">
                    <h2>Newsletter<span class="icone-texte">I</span></h2>
                    <form>
                        <input type="email" placeholder="email">
                    </form>
                </div>
            </div>
            <div class="clear"></div>
        </div> <!-- .content -->

    </div> <!-- .container -->
    <div class="footer">
        <p>
            <a href="#">Mentions légales</a>
            <a href="#">Plan du site</a>
        </p>
    </div>


<script type="text/javascript">
    //slider flexslide
    $(window).load(function() {
	$('.flexslider').flexslider({
            animation: "slide"
	});
    });	
	
    (function($){
        var $div = $('.header-panier div').first();
        $('.header-panier-etendre').click(function(event) {
            event.preventDefault();
            if ($(this).hasClass('ouvert')) {
                $(this).removeClass('ouvert');
                $div.html('<table><tr><td>Tomates</td><td>x 3</td><td>2.23&nbsp;€</td></tr></table>');
            } else {
                $(this).addClass('ouvert');
                $div.html('<table><tr><td>Tomates</td><td>x 3</td><td>2.23&nbsp;€</td></tr>'+
                                                    '<tr><td>Chocolat</td><td>x 1</td><td>1.75&nbsp;€</td></tr>'+
                                                    '<tr><td>Crayon</td><td>x 10</td><td>3.45&nbsp;€</td></tr>'+
                                                    '<tr><td>Mayonnaise</td><td>x 2</td><td>1.39&nbsp;€</td></tr></table>');
            }
        });
    })(jQuery);
	
</script>


</body>


</html>


